<template>
  <div class="service-benefits">
    <!-- <div v-html="content"></div> -->
    <MarkdownContent :content="markdownContent" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
// @ts-ignore - 忽略API导入错误
import { getSetting } from '@/api/index'
import { defineAsyncComponent } from 'vue'

// 添加具名导出
defineOptions({
  name: 'PrivacyPolicy'
})

let markdownContent = ref('')

// 异步导入MarkdownContent组件
const MarkdownContent = defineAsyncComponent(() => 
  import('@/components/MarkdownContent.vue')
)

const into = () => {
  getSetting().then((res: any) => {
    console.log(res)
    markdownContent.value = res.result.agreement.privacy_agreement
  })
}

onMounted(() => {
  into()
})
</script>

<style lang="scss" scoped>
.service-benefits {
  width: 100%;
  max-width: 65ch;
  margin: 30px auto;
  font-family: Arial, sans-serif;
}

/* 移动端适配 */
@media (max-width: 767px) {
  .service-benefits {
    grid-template-columns: 1fr;
    grid-gap: 10px;
  }
}
</style> 